<!DOCTYPE html>
<html xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta content="text/html;charset=utf-8">
    <title>欢迎使用实践星</title>
    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">

    <script crossorigin="anonymous"
            integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
            src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script crossorigin="anonymous"
            integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
    <script crossorigin="anonymous" src="https://kit.fontawesome.com/487e95a78d.js"></script>
</head>

<body>
<header>
    <nav class="navbar navbar-expand navbar-dark flex-column flex-md-row">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand d-flex w-50 mr-auto" href="#" th:href="@{/}">实践星</a>
                <button class="navbar-toggler" data-target="#collapsingNavbar3" data-toggle="collapse"
                        type="button">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
                <ul class="navbar-nav w-100 justify-content-begin">
                    <li class="nav-item" sec:authorize="isAuthenticated()">
                        <a class="nav-link" th:href="@{/logout}">退出</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
                    <li class="nav-item" sec:authorize="isAuthenticated()">
                        <span style="color: #fff;">登录时间：<span th:text="${loginTime}"/></span>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<div class="container py-5 h-100">
    <div class="row d-flex justify-content-center align-items-center h-100 alert alert-success">
        <span><strong>操作完成，</strong>登录成功！！！</span>
    </div>
    <section style="background-color: #f4f5f7;">
        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col col-lg-6 mb-4 mb-lg-0">
                <div class="card mb-3" style="border-radius: .5rem;">
                    <div class="row g-0">
                        <div class="col-md-4 gradient-custom text-center text-white"
                             style="border-top-left-radius: .5rem; border-bottom-left-radius: .5rem;">
                            <img alt="用户头像" class="img-fluid my-5" style="width: 80px;" th:src="${photo}"/>
                            <h5>
                                <span th:text="${user_name}"/>
                            </h5>
                            <p>实践星用户</p>
                            <i class="far fa-edit mb-5"></i>
                        </div>
                        <div class="col-md-8">
                            <div class="card-body p-4">
                                <h6>基础信息</h6>
                                <hr class="mt-0 mb-4">
                                <div class="row pt-1">
                                    <div class="col-6 mb-3">
                                        <h6>用户帐号</h6>
                                        <p class="text-muted"><span sec:authentication="principal.username"/></p>
                                    </div>
                                </div>
                                <h6>联系方式</h6>
                                <hr class="mt-0 mb-4">
                                <div class="row pt-1">
                                    <div class="col-6 mb-3">
                                        <h6>QQ</h6>
                                        <p class="text-muted">10000</p>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <h6>电话</h6>
                                        <p class="text-muted">136 1234 5678</p>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-start">
                                    <a href="#!"><i class="fab fa-facebook-f fa-lg me-3"></i></a>
                                    <a href="#!"><i class="fab fa-twitter fa-lg me-3"></i></a>
                                    <a href="#!"><i class="fab fa-instagram fa-lg"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<input th:name="${_csrf.parameterName}" th:value="${_csrf.token}" type="hidden"/>
</body>

</html>